<template>
  <div class="common-body-wrapper">
    <div class="PartBox">
      <h3 class="title">后台告警提醒</h3>
      <div class="alarmsBox">
        <ul>
          <li>
            <label>黑名单进场告警</label>
            <span :class="{textColor:emergencyConfig.blacklistIn}">
              <el-switch
                v-model="emergencyConfig.blacklistIn"
                @change="changeStatus"
                on-text
                on-color="#2CC6BB"
                off-text
              ></el-switch>
              {{emergencyConfig.blacklistIn?"开启":"关闭"}}
            </span>
          </li>
          <li>
            <label>黑名单出场告警</label>
            <span :class="{textColor:emergencyConfig.blacklistOut}">
              <el-switch
                v-model="emergencyConfig.blacklistOut"
                @change="changeStatus"
                on-text
                on-color="#2CC6BB"
                off-text
              ></el-switch>
              {{emergencyConfig.blacklistOut?"开启":"关闭"}}
            </span>
          </li>
          <li>
            <label>红名单进场告警</label>
            <span :class="{textColor:emergencyConfig.redlistIn}">
              <el-switch
                v-model="emergencyConfig.redlistIn"
                @change="changeStatus"
                on-text
                on-color="#2CC6BB"
                off-text
              ></el-switch>
              {{emergencyConfig.redlistIn?"开启":"关闭"}}
            </span>
          </li>
          <li>
            <label>红名单出场告警</label>
            <span :class="{textColor:emergencyConfig.redlistOut}">
              <el-switch
                v-model="emergencyConfig.redlistOut"
                @change="changeStatus"
                on-text
                on-color="#2CC6BB"
                off-text
              ></el-switch>
              {{emergencyConfig.redlistOut?"开启":"关闭"}}
            </span>
          </li>
          <li>
            <label>指定车牌进场告警</label>
            <span :class="{textColor:emergencyConfig.carnoIn}">
              <el-switch
                v-model="emergencyConfig.carnoIn"
                @change="changeStatus"
                on-text
                on-color="#2CC6BB"
                off-text
              ></el-switch>
              {{emergencyConfig.carnoIn?"开启":"关闭"}}
            </span>
          </li>
          <li>
            <label>指定车牌出场告警</label>
            <span :class="{textColor:emergencyConfig.carnoOut}">
              <el-switch
                v-model="emergencyConfig.carnoOut"
                @change="changeStatus"
                on-text
                on-color="#2CC6BB"
                off-text
              ></el-switch>
              {{emergencyConfig.carnoOut?"开启":"关闭"}}
            </span>
          </li>
        </ul>
      </div>
    </div>
    <div class="PartBox">
      <h3 class="title">
        现场管理员告警提醒
        <p class="tip">注：现场管理员需要在登录的条件下才能收到告警提醒</p>
      </h3>
      <div class="alarmsBox">
        <ul>
          <li>
            <label>黑名单进场告警</label>
            <span :class="{textColor:emergencyConfig.lmBlacklistIn}">
              <el-switch
                v-model="emergencyConfig.lmBlacklistIn"
                @change="changeStatus"
                on-text
                on-color="#2CC6BB"
                off-text
              ></el-switch>
              {{emergencyConfig.lmBlacklistIn?"开启":"关闭"}}
            </span>
          </li>
          <li>
            <label>黑名单出场告警</label>
            <span :class="{textColor:emergencyConfig.lmBlacklistOut}">
              <el-switch
                v-model="emergencyConfig.lmBlacklistOut"
                @change="changeStatus"
                on-text
                on-color="#2CC6BB"
                off-text
              ></el-switch>
              {{emergencyConfig.lmBlacklistOut?"开启":"关闭"}}
            </span>
          </li>
          <li>
            <label>红名单进场告警</label>
            <span :class="{textColor:emergencyConfig.lmRedlistIn}">
              <el-switch
                v-model="emergencyConfig.lmRedlistIn"
                @change="changeStatus"
                on-text
                on-color="#2CC6BB"
                off-text
              ></el-switch>
              {{emergencyConfig.lmRedlistIn?"开启":"关闭"}}
            </span>
          </li>
          <li>
            <label>红名单出场告警</label>
            <span :class="{textColor:emergencyConfig.lmRedlistOut}">
              <el-switch
                v-model="emergencyConfig.lmRedlistOut"
                @change="changeStatus"
                on-text
                on-color="#2CC6BB"
                off-text
              ></el-switch>
              {{emergencyConfig.lmRedlistOut?"开启":"关闭"}}
            </span>
          </li>
          <li>
            <label>指定车牌进场告警</label>
            <span :class="{textColor:emergencyConfig.lmCarcodeIn}">
              <el-switch
                v-model="emergencyConfig.lmCarcodeIn"
                @change="changeStatus"
                on-text
                on-color="#2CC6BB"
                off-text
              ></el-switch>
              {{emergencyConfig.lmCarcodeIn?"开启":"关闭"}}
            </span>
          </li>
          <li>
            <label>指定车牌出场告警</label>
            <span :class="{textColor:emergencyConfig.lmCarcodeOut}">
              <el-switch
                v-model="emergencyConfig.lmCarcodeOut"
                @change="changeStatus"
                on-text
                on-color="#2CC6BB"
                off-text
              ></el-switch>
              {{emergencyConfig.lmCarcodeOut?"开启":"关闭"}}
            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

// 引进vue的js
import emergency_config from "./js/emergency_config.js";
export default {
  mixins: [common, stardardList, emergency_config],

  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang="less" scoped>
.common-body-wrapper {
  overflow: auto;
}
.PartBox {
  width: 480px;
  margin: 0 auto;
  margin-top: 35px;
  .title {
    margin-bottom: 15px;
  }
  .tip {
    color: rgb(247, 128, 128);
    font-size: 14px;
  }
  .alarmsBox {
    border: 1px solid #ccc;
    background: rgb(248, 248, 248);
    padding: 20px 85px;
    border-radius: 2.5px;
    li {
      &:not(:last-child) {
        margin-bottom: 20px;
      }
      > label {
        font-weight: 900;
      }
      span {
        float: right;
        &.textColor {
          color: #2cc6bb;
        }
      }
    }
  }
}
</style>